<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'整改订单'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div :class="['analyItem', 'anItemBor', threeIndex === index ? 'anItemBor-active' : '']" v-for="(item,index) in orderDetetail" :key = "index" @click="fourShow(index,item.type, item.role)">
            <p class="analyItemTit tx-center analyLightGreen" v-if="projectOrder.status == item.type">{{item.name}}</p>
            <p class="analyItemTit tx-center analyShallowGreen" v-else-if="projectOrder.status > item.type || projectOrder.status === 0 ">{{item.name}}</p>
            <p class="analyItemTit tx-center" v-else>{{item.name}}</p>
            <div class="analyItemCon">
                <div v-if="item.roleName">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">操作时间</span>
                        <span class="cGreen"> {{item.type | getCurrentOperation(orderDetetailOperation,1) }}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">操作人</span>
                        <span class="cGreen"> {{item.type | getCurrentOperation(orderDetetailOperation,2) }}</span>
                    </p>
                </div>
                <span class="roleFixed" v-if="item.roleName">{{item.roleName}}</span>
                <span class="circlemark circlemark-purple" v-if="projectOrder.status == item.type  ||  projectOrder.status < item.type && projectOrder.status !== 0">待</span>
                <span class="circlemark circlemark-lightGreen" v-else-if=" projectOrder.status > item.type ||  projectOrder.status === 0">完</span>
            </div>
        </div>
    </div>
  <!-- 四段渲染容器 -->
    <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
        <!-- 物业办理 -->
        <rx-changeFour1 v-if="threeIndex === 0" :key="0" :type="type" :role="role"></rx-changeFour1>
        <rx-changeFour2 v-if="threeIndex === 1" :key="1" :type="type" :role="role"></rx-changeFour2>
        <rx-changeFour3 v-if="threeIndex === 2" :key="2" :type="type" :role="role"></rx-changeFour3>
        <rx-changeFour4 v-if="threeIndex === 3" :key="3" :type="type" :role="role"></rx-changeFour4>
    </transition-group>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getSenceProjectOrderDetailByOrderCode } from '../../Resources/Api/scene'
import rxChangeFour1 from './four/changeFour1.vue'
import rxChangeFour2 from './four/changeFour2.vue'
import rxChangeFour3 from './four/changeFour3.vue'
import rxChangeFour4 from './four/changeFour4.vue'

export default {
    components: {
        rxChangeFour1,
        rxChangeFour2,
        rxChangeFour3,
        rxChangeFour4
    },
    data () {
        return {
            orderDetetail: [], // 订单数据
            orderDetetailOperation: [], // 操作人信息
            projectOrder: [], // 订单状态
            threeIndex: undefined, // index值
            type: '', // 类型
            code: '', // 当前订单code值
            role: '' // 当前角色的id
        }
    },
    computed: {
        ...mapGetters(['twoToThreeInfo'])
    },
    mounted () {
        this.getSenceProjectOrderDetailByOrderCode()
    },

    created () {
        this.code = this.$route.query.code
    },
    methods: {
        ...mapMutations({
            'setTwoToThreeInfo': 'SET_TWO_TO_THREE_INFO'
        }),
        // 获取数据
        getSenceProjectOrderDetailByOrderCode () {
            if (this.$route.query.project.timeoutFlag) {
                const warnDiv = this.$createElement
                this.$notify({
                    title: '警告',
                    message: warnDiv('i', { style: 'color: red; fontSize: 16px' }, '该订单已超期 无法提交'),
                    type: 'warning',
                    offset: 30,
                    duration: 1000
                })
            }
            let parm = {
                orderCode: this.code
            }
            // 接口获取数据
            getSenceProjectOrderDetailByOrderCode(parm).then(results => {
                if (results.data.StatusCode === 1) {
                    this.orderDetetail = results.data.Body.senceStage
                    this.projectOrder = results.data.Body.projectOrder
                    this.orderDetetailOperation = results.data.Body.projectOrderUserOperationList
                    this.setTwoToThreeInfo(this.projectOrder)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 点击切换Index
        fourShow (index, type, roleId) {
            this.threeIndex = index
            this.type = type
            this.role = roleId
        },
        clickFourShow () {
            this.threeIndex = undefined
            this.getSenceProjectOrderDetailByOrderCode()
            this.setTwoToThreeInfo(this.projectOrder)
        }
    },
    watch: {
        $route () {
            this.threeIndex = undefined
            this.code = this.$route.query.code
            this.getSenceProjectOrderDetailByOrderCode()
        }
    },
    filters: {
        // 操作时间
        getCurrentOperation (type, operationInfo, flag) {
            const currentInfo = operationInfo.filter((item) => { return item.type === type })
            if (currentInfo.length > 0) {
                if (flag === 1) {
                    return currentInfo[0].create_time.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').split(' ')[0]
                }
                if (flag === 2) {
                    return currentInfo[0].create_user_name
                }
            } else {
                return ''
            }
        }
    }
}
</script>
<style lang="scss">
    .roleFixed {
        position: absolute;
        right: 30px;
        top: 5px;
        font-family: Tahoma,Helvetica,Arial;
        font-size: 12px;
        color: #85da02;
        letter-spacing: 2px;
    }

</style>
